<template>
  <el-container class="query_container">
    <el-header>
      <h1>请选择查询</h1>
    </el-header>

    <el-main style="display:flex;flex-direction:column">
      <el-table
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="height:100%"
      >
        <el-table-column prop="queryName" label="查询名称"></el-table-column>

        <el-table-column label="创建时间">
          <span slot-scope="pros">{{timestampToTime(pros.row.queryCreatetime)}}</span>
        </el-table-column>

        <el-table-column label="上次执行时间">
          <span slot-scope="pros">{{timestampToTime(pros.row.queryLastexectime)}}</span>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-button type="primary" @click="toNext">下一步
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  props: ["selectedTemplate","reportInfo"],
  data() {
    return {
      tableData: [],
      page: 1,
      size: 20,
      currentRow: null
    };
  },

  mounted() {
    this.loadData();
  },

  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    toNext() {
      if (this.currentRow != "") {
        this.$router.push({
          path: "/relativeSelect",
          query: {
            selectedTemplate: this.selectedTemplate,
            selectedQuery: this.currentRow.queryId,
            reportInfo:this.reportInfo
          }
        });
      } else {
        this.$notify.error({
          title: "失败",
          message: "请选择一个查询"
        });
      }
    },

    // 时间戳转换成时间
    // 使用element table组件中的formatter属性，传入一个函数
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //如果date为10位不需要乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },

    loadData() {
      this.$axios
        .get("/query/list?" + "page=" + this.page + "&size=" + this.size)
        .then(d => {
          this.tableData = d.data.rows;
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "查询列表获取失败"
          });
        });
    }
  }
};
</script>

<style scoped>
.query_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
